<template>
    <!-- 链路域 -->
    <div style="position: relative;">
        <!-- <div class="width100 height100 flex-column all" 
            style="position: absolute;">
            <div class="flex-column left-table flex2">
                <div class="flex1" style="position: relative;">
                    <div class="width100 height100 sw-table-page">
                        <table border="0" cellspacing="0" cellpadding="5" width="100%" class="sw-table">
                            <thead align="center">
                                <tr>
                                    <th v-for="item in column">{{ item.label }}</th>
                                </tr>
                            </thead>
                            <tbody align="center">
                                <tr v-for="item in tableData">
                                    <td v-for="col in column">{{ item[col.prop] }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="flex1 chartFull " :id="snrDomId"></div>
            </div>
            <div class="piecewise flex1 flex">
                <div class="flex1" v-for="item in splasheList" :style="{width: 'calc(100% / '+splasheList.length+')'}">
                    <splashes :layout="layout" :change="change" :name="item.name" :url="item.url"
                        :socketObj="socketObj" />
                </div>
            </div>
        </div> -->
        <div class="width100 height100" :class="layout == 'one' ? 'flex one' : 'flex-column all'"
            style="position: absolute;">
            <div class="flex-column left-table" :class="layout == 'one' ? '' : 'flex2'">
                <div class="flex1" style="position: relative;">
                    <div class="width100 height100 sw-table-page">
                        <table border="0" cellspacing="0" cellpadding="5" width="100%" class="sw-table">
                            <thead align="center">
                                <tr>
                                    <el-tooltip v-for="item in column" effect="dark" :content="item.label+''"
                                        placement="top">
                                        <th>{{ item.label }}</th>
                                    </el-tooltip>
                                </tr>
                            </thead>
                            <tbody align="center">
                                <tr v-for="item in tableData">

                                    <td v-for="col in column">
                                        <el-tooltip effect="dark" :content="col.prop ? item[col.prop]+'' : ''" placement="top">
                                            <span>{{ col.prop ? item[col.prop] : '' }}</span>
                                        </el-tooltip>
                                    </td>


                                    <!-- <td v-for="col in column">{{ col.prop ? item[col.prop] : '' }}</td> -->
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="flex1 chartFull " :id="snrDomId"></div>
            </div>
            <div class="piecewise flex1 flex">
                <div class="flex1" v-for="item in splasheList"
                    :style="{ width: 'calc(100% / ' + splasheList.length + ')' }">
                    <splashes :layout="layout" :change="change" :name="item.name" :url="item.url"
                        :socketObj="socketObj" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import splashes from './splashes.vue'; // 散点图

export default {
    name: 'pageAnalyse',
    emits: [],
    components: { splashes },
    props: {
        // 布局类型
        layout: { type: String, default: 'one' },
        showClass: { type: Boolean },
        change: {},
        socketObj: { type: Object, default: () => { } }
    },
    watch: {
        change() {
            this.$nextTick(() => {
                setTimeout(this.chartResize, 0)
            })
        },
        socketStatus(val) {
            if (val) this.initUpdateBack();
        },
    },
    computed: {
        socketStatus() {
            return this.socketObj.status
        }
    },
    created() {
        // snr折线图id
        this.snrDomId = this.$uuid();
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                // 初始化图像
                this.initChart();
                // 初始化回调函数和启动接收数据
                this.initUpdateBack();
            }, 100)
        })
    },
    data() {
        return {
            // 表格
            column: [
                { label: '时间', prop: 'time', },
                { label: '频率/MHz', prop: 'central' },
                { label: 'SNR/dB', prop: 'snr' },
                { label: '发送包数', prop: 'send_num' },
                { label: '同步包数', prop: 'sync_num' },
                { label: '正确解包数', prop: 'dem_num' },
                { label: 'CDF/丢包率10%', prop: 'cdf_10' },
                { label: 'CDF/丢包率20%', prop: 'cdf_20' },
                { label: 'CDF/丢包率50%', prop: 'cdf_50' },
            ],
            // 表格数据
            tableData: [],
            // snr折线图id
            snrDomId: null,
            // snr折线图对象
            snrChart: null,
            // 星座图集合
            splasheList: [
                { name: '星座图', url: 'Planisphere' },
            ]
        }
    },

    methods: {
        // 初始化socket返回处理函数
        initUpdateBack() {
            if (!this.socketObj) return;
            this.socketBack();
            this.startPush();
        },
        // 设置socket回调函数
        socketBack() {
            // 折线图回调函数
            this.socketObj.setMsgBack({
                cmd: 'push-SNR',
                fun: rs => {
                    let { time, central, snrdb } = this.formartResult(rs.data);
                    for (let i = 0; i < time.length; i++) {
                        snrdb[i] = [time[i], snrdb[i]]
                    }
                    this.updateCharts(snrdb, central);
                },
            })

            // 表格回调函数
            this.socketObj.setMsgBack({
                cmd: 'push-LinkStatistics',
                fun: rs => {
                    console.log("收到链路域表格数据:", rs)
                    const { time, central, snrdb } = this.formartResult(rs.data);
                    let list = [];
                    for (let i = 0; i < time.length; i++) {
                        let row = {
                            time: time[i] || null,
                            central: central[i] || null,
                            snrdb: snrdb[i] || null,
                        }
                        list.push(row);
                    }
                    this.tableData = list;
                },
            })
        },
        // 启动推送消息
        startPush() {
            // 启动折线图推送
            this.socketObj.sendMsg({ cmd: 'start-SNR' });
            // 启动表格数据推送
            this.socketObj.sendMsg({ cmd: 'start-LinkStatistics' });
        },
        // socket数据过滤统一处理
        formartResult(result) {
            let { dataLables, data } = result;
            let resultMap = {};
            if (dataLables.length != data.length) {
                return resultMap
            } else {
                for (let i = 0; i < dataLables.length; i++) {
                    resultMap[dataLables[i]] = data[i]
                }
            }
            return resultMap
        },
        // 适配图像
        chartResize() {
            if (!this.snrChart) {
                this.initChart()
            } else {
                this.snrChart.resize()
            }
        },
        // 初始化图形dom
        initChart(snrdb, central) {
            if (!this.snrChart) this.snrChart = echarts.init(document.getElementById(this.snrDomId));
            this.snrChart.setOption({
                title: { text: '北京时间(小时),频率(MHz)', bottom: '0', left: '10', textStyle: { fontSize: '12px', fontFamily: 'Microsoft YaHei, Microsoft YaHei', color: '#575D73' } },
                grid: { containLabel: false, show: true, backgroundColor: 'black', left: '40', bottom: '70', right: '10', top: '10' },
                xAxis: [
                    { type: 'value', boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, interval: 1, min: 0, max: 23 },
                    {
                        data: central,
                        type: 'category', position: 'bottom', boundaryGap: false, axisLine: { onZero: false, show: false }, axisTick: { show: false, alignWithLabel: true }, splitLine: { show: false },
                        axisLabel: { interval: 0, rotate: 45, margin: 25, formatter: function (value, index) { return `{yearStyle|${value}}` }, rich: { yearStyle: { color: '#575D73', fontFamily: 'Microsoft YaHei, Microsoft YaHei', fontWeight: '700', }, } },
                        textStyle: { fontSize: this.showClass ? '0.6rem' : '12px', fontFamily: 'Microsoft YaHei, Microsoft YaHei', color: '#575D73' },
                    }
                ],
                yAxis: { type: 'value', name: 'SNR', nameGap: -20, nameRotate: 270, nameTextStyle: { padding: [50, 0, 0, 0], rich: {} }, axisLine: { onZero: false }, splitLine: { show: false } },
                series: [
                    {
                        data: snrdb,
                        // 设置线条宽度，加粗度
                        type: 'line', showSymbol: false, connectNulls: true, lineStyle: { color: '#AA9B5F', width: 1 }
                    },
                ]
            });
        },
        // 更新折线图
        updateCharts(snrdb, central) {
            if (!this.snrChart) {
                this.initChart(snrdb, central);
            } else {
                this.snrChart.setOption({ xAxis: [{}, { data: central },], series: [{ data: snrdb }] })
            }
        }

    },
    beforeDestroy() {
        // 删除socket的数据监听
        if (this.socketObj) {
            // 停止推送
            this.socketObj.sendMsg({ cmd: 'stop-SNR' });
            // 删除处理函数
            this.socketObj.removeMsgBack({ cmd: 'push-SNR' })
            // 删除表格数据处理函数
            this.socketObj.removeMsgBack({ cmd: 'push-Statistics' });
        }
    }
}
</script>

<style lang="scss" scoped>
.sw-table-page {
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
}

.sw-table {
    thead {
        th {
            background-color: #121212;
            overflow: hidden;
            color: #767676;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 700;
            font-style: normal;
            text-transform: none;
        }
    }

    tbody {
        td {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: #D8D8D8;
            font-style: normal;
            text-transform: none;
        }

        tr:nth-child(odd) {
            background-color: #575D73;
            /*奇数行的背景颜色*/
        }

        tr:nth-child(even) {
            background-color: #313A53;
            /*偶数行的背景颜色*/
        }
    }

}
</style>